<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/home/hotShopping.css" />
	</head>

	<body>
		<div id="hotshopping" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">新品上市</h1>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div v-if="!titleImg" class="hotbackground"></div>

					<div v-else class="hotbackground" :style="{backgroundImage : 'url(' + imgCommonUrl + titleImg + ')'}"></div>
					<div class="seach_title">
						<!--<div :class="{check:tapCheck ==0}">默认</div>
						<div :class="{check:tapCheck ==1}">
							价格
							<div class="lift">
								<div class="checklift"></div>
								<div></div>
							</div>
						</div>
						<div :class="{check:tapCheck ==2}">销量</div>-->
						<div v-for="(tapCls,index) in tapCls" :class="{check:tapCheck == index}" @tap="tapCheckTap(index)">
							{{tapCls.text}}
							<div class="lift" v-if="index==1">
								<div :class="{checklift:rise}"></div>
								<div :class="{checklift:!rise}"></div>
							</div>
						</div>
						<span class="transition"></span>
					</div>

					<div class="nav_cls">
						<!--<div class="check">
							<div>全部</div>
						</div>
						<div>
							<div>居家</div>
						</div>

						<div>
							<div>餐厨</div>
						</div>

						<div>
							<div>配件</div>
						</div>

						<div>
							<div>服饰</div>
						</div>

						<div>
							<div>洗护</div>
						</div>

						<div>
							<div>婴童</div>
						</div>

						<div>
							<div>杂货</div>
						</div>-->
						<div v-for="(hotSeach,index) in hotSeach" :class="{check : hotSeachCheck ==index}" @tap="hotSeachTap(index)">
							<div>{{hotSeach}}</div>
						</div>
					</div>
					<div style="width: 100%;overflow:  hidden">
						<div class="shop_data">
							<div class="shop_list" v-for="shopList in shopList" @tap="shopListTap(shopList)">
								<div>
									<div class="shop_list_img"><img v-lazy="imgCommonUrl + shopList.pic" /></div>
									<div class="shop_list_data">
										<div class="shop_list_text">{{shopList.name}}</div>
										<div class="shop_list_subtitle size">{{shopList.brief}}</div>
										<div class="shop_list_money">
											<div class="shop_list_newsum">
												<span class="size">￥</span>{{shopList.cash}}
											</div>
											<div class="shop_list_shopcar"></div>
										</div>
									</div>
								</div>
							</div>
							<!--<div class="shop_list">
								<div>
									<div class="shop_list_img"><img src="//m.360buyimg.com/babel/jfs/t16615/334/1674473142/99151/a9eee498/5ad42aceN188c691a.jpg" /></div>
									<div class="shop_list_data">
										<div class="shop_list_text">雅量超市pop标签夹</div>
										<div class="shop_list_subtitle size">品质生活 推陈出新</div>
										<div class="shop_list_money">
											<div class="shop_list_newsum">
												<span class="size">￥</span>491111111
											</div>
											<div class="shop_list_shopcar"></div>
										</div>
									</div>
								</div>
							</div>-->
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/common.js"></script>

		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh,
						auto: true
					}
				}
			});
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/noimg.jpg',
				loading: '../../images/noimg.jpg'
			});
			var hotshopping = new Vue({
				el: '#hotshopping',
				data: {
					imgCommonUrl: common.imageUrl,
					tapCls: [{
						text: '全部',
						val: 'recDate'
					}, {
						text: '销量',
						val: 'buys'
					}, {
						text: '价格',
						val: 'cash'
					}],
					tapCheck: 0,
					rise: true,
					hotSeach: '',
					hotSeachCheck: -1,
					pageNum: 1,
					shopList: [],
					titleImg: ''
				},
				methods: {
					tapCheckTap: function(index) {
						if(this.tapCheck == index && index != 1) {
							return
						}
						if(this.tapCheck == index) {
							this.rise = !this.rise
						} else {
							this.rise = true
							this.tapCheck = index
						}

						mui('#pullrefresh').pullRefresh().refresh(true);
						hotshopping.shopList = []
						hotshopping.pageNum = 1
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);

					},
					hotSeachTap: function(index) {
						if(this.hotSeachCheck == index) {
							this.hotSeachCheck = -1
						} else {
							this.hotSeachCheck = index
						}
						mui('#pullrefresh').pullRefresh().refresh(true);
						hotshopping.shopList = []
						hotshopping.pageNum = 1
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					},
					shopListTap: function(data) {
						if(!data.prodId) {
							return
						}
						common.open('../details/details.html', '../details/details.html', data.prodId)
					}
				},
				mounted: function() {
					common.ajax('/index/getHotsearch', {}, function(data) {
						if(data.code == 1) {
							hotshopping.hotSeach = data.data.hotwords
						}
					}, true, 'get')
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				hotshopping.titleImg = self.parameter
			})

			function pullupRefresh() {
				var orders = hotshopping.rise ? 'asc' : 'desc'
				var checkVal = hotshopping.hotSeachCheck < 0 ? '' : hotshopping.hotSeach[hotshopping.hotSeachCheck]

				common.jsonAjax('/m_search/prodlist2', {
					curPageNO: hotshopping.pageNum++,
					orders: hotshopping.tapCls[hotshopping.tapCheck].val + ',' + orders,
					keyword: checkVal
				}, function(data) {
					if(data.code == 1) {
						if(hotshopping.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
						hotshopping.shopList = hotshopping.shopList.concat(data.data.list)
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}

				}, true, 'post')
			}
		</script>
	</body>

</html>